// 头部滚动出现阴影

const header = document.querySelector('header')
window.addEventListener('scroll', function () {
  header.style.boxShadow = ' 0px 20px 30px -8px rgb(0 0 0 / 10%)'
})


// 头部nav的tab栏切换

const nav = document.querySelector('.header .nav')
nav.addEventListener('click', function (e) {
  if (e.target.tagName === 'A') {
    console.log(e.target.tagName);
    document.querySelector('.nav .active').classList.remove('active')
    e.target.classList.add('active')
  }
})


// 模块二

let card = [
  {
    img: '../images/zebra-img/a1.png',
    h4: `多感官情景互动 <br> 激发孩子兴趣`,
    p: '基于先进科技及专业教研中心，研发多维度互动内容，生动有趣'
  },
  {
    img: '../images/zebra-img/a2.png',
    h4: ` 系统内容体系 <br> 专注每一步成长`,
    p: '内容体系科学有趣，难度螺旋式上升'
  },
  {
    img: '../images/zebra-img/a3.png',
    h4: `完善的内容激励体系 <br> 达成持续性成长`,
    p: '实时正向反馈，班主任及时辅导鼓励，积分实物激励'
  },
  {
    img: '../images/zebra-img/a4.png',
    h4: `海量行为大数据 <br> 精准提升成长效果`,
    p: '实时分析内容情况，精准定位孩子的问题，职能调整调整内容路径'
  }
]
const ul = document.querySelector('.section2 .cardlist')
for (let i = 0; i < card.length; i++) {
  const li = document.createElement('li')
  li.innerHTML = `
    <img src=${card[i].img}>
    <h4>${card[i].h4}</h4>
    <p>${card[i].p}</p>
  `
  ul.appendChild(li)
}



// 模块五

// 排他切换
const btn = document.querySelector('.tab .tab_btn')
const content = document.querySelectorAll('.tab .tab_content')
btn.addEventListener('click', function (e) {
  if (e.target.tagName === 'LI') {
    document.querySelector('.tab_btn .select').classList.remove('select')
    e.target.classList.add('select')
    for (let i = 0; i < content.length; i++) {
      content[i].style.display = 'none'
    }
    content[e.target.dataset.id].style.display = 'block'
  }
})

// 模块五 大盒子图片随小盒子切换

const big = document.querySelectorAll('.tab_content .big')
const small = document.querySelectorAll('.tab_content .small')
for (let i = 0; i < small.length; i++) {
  small[i].addEventListener('mouseover', function (e) {
    if (e.target.tagName === 'IMG') {
      small[i].querySelector('.green').classList.remove('green')
      e.target.parentNode.classList.add('green')
      big[i].querySelector('img').src = e.target.src
    }
  })
}



// 侧边栏切换

const lift_left = document.querySelector('.lift_left')
const lift = document.querySelector('.lift')
const wechat = document.querySelector('.lift .wechat')
wechat.addEventListener('mouseenter', () => {
  lift_left.style.display = 'block'
})
wechat.addEventListener('mouseleave', () => {
  lift_left.style.display = 'none'
})








